<template>
  <div class="home_carousel_control">
    <div class="card_list_box">
      <ul class="card_title">
        <li class="title_left">
          <img v-lazy="'/imgs/home/youhui.webp'" :key="'youhui'" alt="" />
          <span>电竞专属优惠</span>
        </li>
        <li class="title_right">
          <p class="more" @click="clickGameMore">
            {{ t('home_page_more') }}
          </p>
        </li>
      </ul>
    </div>
    <nut-swiper :init-page="0" :auto-play="3000" pagination-visible pagination-color="#426543"
      pagination-unselected-color="#808080" style="height: 124px">
      <nut-swiper-item v-for="(item, index) in list" :key="index">
        <img v-lazy="item" :key="item" alt="" class="imgs" draggable="false" />
      </nut-swiper-item>
    </nut-swiper>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

// import { useRouter } from "vue-router";
// const router = useRouter();

const list = ref([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
])

const clickGameMore = () => {

}
</script>

<style lang="scss" scoped>
.home_carousel_control {
  width: 347px;
  margin: 0 auto;
  border-radius: 8px;

  .card_list_box {
    padding-left: 14px;
    margin: 0 auto;

    .card_title {
      display: flex;
      // padding: 0 14px;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      line-height: 24px;
      margin: 12px 0;

      .title_left {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;
        color: #FCFFFA;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }

      .title_right {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        line-height: 12px;
        text-align: left;
        color: #C6C4F5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .more {
          background: #282747;
          margin-left: 8px;
          padding: 8px;
          border-radius: 5px;
          box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
        }
      }
    }
  }

  .imgs {
    height: 124px;
    width: 347px;

  }

  :deep(.nut-swiper) {
    border-radius: 8px;
  }
}
</style>